<!-- 优惠劵列表  -->
<template>
	<view class="page_box">
		<view class="head_box">
			<view class="coupon-nav x-f">
				<view class="nav-item y-f" v-for="nav in couponsState" :key="nav.id" @tap="onNav(nav.id)">
					<view class="item-title">{{ nav.title }}</view>
					<text class="nav-line" :class="{ 'line-active': stateCurrent === nav.id }"></text>
				</view>
			</view>
		</view>
		<view class="content_box">
			<!-- <text class="justify-center"></text> -->
			<!-- <view class="coupon-list" v-for="(c, index) in couponList" :key="index" @tap="toCouponDetail(c)"> -->
			<view class=" " v-if="stateCurrent == 1">
				<view class="coupon-list" v-for="(c, index) in couponList" :key="index"><shopro-coupon :state="stateCurrent" :couponData="c"></shopro-coupon></view>
			</view>
			<view class="" v-if="stateCurrent == 2">
				<view class="coupon-list" v-for="(c, index) in couponList1" :key="index" @tap="toCouponDetail(c)">
					<shopro-coupon1 :state="stateCurrent" :couponData="c"></shopro-coupon1>
				</view>
			</view>

			<shopro-empty v-if="emptyData.show" :emptyData="emptyData" :isFixed="false" style="display: flex; justify-content: center;margin-top: 300rpx;"></shopro-empty>
		</view>
		<view class="foot_box"></view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			stateCurrent: 1,
			couponList: [],
			couponList1: [],
			couponsState: [
				{
					id: 1,
					title: '套餐包 ',
				},
				{
					id: 2,
					title: '优惠券 ',
				},
			],
			emptyData: {
				show: false,
				img: '../../static/imgs/empty/empty_network.png',
				tip: '暂无数据',
				path: '',
				pathText: '',
			},
		};
	},
	computed: {},
	onLoad() {
		this.getCouponList();
		this.getCouponList1();
		let e = this.$Route.query;
	},
	methods: {
		onNav(id) {
			this.stateCurrent = id;
			this.couponList = [];
			this.getCouponList();
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas,
			});
		},
		// 套餐包
		getCouponList() {
			let that = this;
			that.$api('getPkg', {
				page: 1,
			}).then(res => {
				console.log('res222 :>> ', res);
				if (res.code == 1) {
					that.couponList = res.data.data;
					if (!that.couponList.length) {
						that.emptyData.show = true;
					}
				}
			});
		},
		getCouponList1() {
			let that = this;
			that.$api('coupons.list', {
				type: that.stateCurrent,
			}).then(res => {
				if (res.code === 1) {
					that.couponList1 = res.data;
				}
			});
		},

		//跳转优惠券详情
		toCouponDetail(data) {
			console.log('data :>> ', data);

			if (data.user_coupons_id) {
				this.jump('/pages/app/coupon/detail', { id: data.id, userCouponId: data.user_coupons_id });
			} else {
				this.jump('/pages/app/coupon/detail', { id: data.id });
			}

			
		},
	},
};
</script>

<style lang="scss">
.page_box {
	background: #fff;
}
.coupon-nav {
	background: #fff;
	height: 100rpx;

	.nav-item {
		flex: 1;
		.item-title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 76rpx;
		}

		.nav-line {
			width: 120rpx;
			height: 4rpx;
			background: #fff;
		}

		.line-active {
			background: rgba(230, 184, 115, 1);
		}
	}
}
.coupon-list {
	margin: 30rpx 20rpx;
}
</style>
